<template>
	<view style="padding-bottom: 32rpx;">

		<view class="list magrin_top">
			<text class="title required">账单类型</text>
			<picker :range="rangeArrey" @change="changeSex" range-key='name'>
				<input type="text" placeholder="请选择" v-model="formData.income" disabled />
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="aspectFit"
					class="more_icon"></image>
			</picker>
		</view>
		<!-- <view class="line" /> -->
		<view class="card">
			<view class="house_name">
				{{dataList.houseName}}
			</view>
			<view class="title">
				总金额
			</view>
			<view class="all_price">
				¥{{dataList.totalAmount}}
			</view>
			<view class="grid_box">
				<view class="grid_item">
					<text class="grid_title">总租金</text>
					<text class="grid_value">¥{{dataList.rentAmount}}</text>
				</view>
				<view class="grid_item">
					<text class="grid_title">总电费</text>
					<text class="grid_value">¥{{dataList.elecAmount}}</text>
				</view>
				<view class="grid_item">
					<text class="grid_title">总水费</text>
					<text class="grid_value">¥{{dataList.waterAmount}}</text>
				</view>
			</view>
		</view>

		<view class="contens">
			<block v-for="(item,index) in dataList.list" :key="index">
				<view class="title" :class="{filter:item.statusName != '已缴纳'}" @click="handleClick(index)">
					{{item.monthNum}}
				</view>
				<view class="list_item" :class="{filter:item.statusName != '已缴纳'}" @click="handleClick(index)">
					<view class="">
						{{formData.incomeType==1?'金额':formData.income}}
					</view>
					<view class="">
						<text v-if="item.amount">¥</text>{{item.amount||'-'}}
					</view>
					<text>{{item.statusName}}</text>
				</view>
				<view class="" style=" background-color: #fafafa;margin-top: 12rpx;"
					v-if="formData.incomeType==1 && item.showUnfold">
					<view class="sub-item">
						<view class="sub-item-label">租金</view>
						<view class="sub-item-value">¥{{item.rentAmount}}</view>
					</view>
					<view class="sub-item">
						<view class="sub-item-label">物业费</view>
						<view class="sub-item-value">¥{{item.manageAmount}}</view>
					</view>
				</view>
				<view class="line" />
			</block>
			<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="dataList.list.length == 0">
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit"
						style="width: 200rpx;height: 200rpx;"></image>
					<text>暂无数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		houseIncome
	} from './js/api.js'
	const rangeArrey = ref([{
			id: 1,
			name: '租金'
		},
		{
			id: 3,
			name: '水费'
		},
		{
			id: 5,
			name: '电费'
		}
	])
	const formData = reactive({
		income: '租金',
		incomeType: 1,
		houseId: ''
	})
	const dataList = reactive({
		elecAmount: 0,
		houseName: '',
		rentAmount: '',
		totalAmount: '',
		waterAmount: '',
		list: [],
	})
	const changeSex = (e) => {
		let index = e.detail.value
		formData.income = rangeArrey.value[index].name
		formData.incomeType = rangeArrey.value[index].id
		getData()
	}
	const getData = async () => {
		let params = {
			houseId: formData.houseId,
			incomeType: formData.incomeType
		}
		let res = await houseIncome(params)
		console.log('dsfghjd0000h', res)
		if (res.data.code == 0) {
			let list = res.data.data
			dataList.elecAmount = list.elecAmount
			dataList.houseName = list.houseName
			dataList.rentAmount = list.rentAmount
			dataList.totalAmount = list.totalAmount
			dataList.waterAmount = list.waterAmount


			if (formData.incomeType == 1) {
				const newList = list.list.map(item => {
					// 合并原对象和新属性，返回新对象
					return Object.assign({}, item, {
						showUnfold: true
					});
				})
				dataList.list = newList
			} else {
				dataList.list = list.list
			}

		}
	}
	const handleClick = (index) => {
		if(formData.incomeType != 1) return 
		dataList.list[index].showUnfold = !dataList.list[index].showUnfold
	}
	onLoad((options) => {
		if (options.id) {
			formData.houseId = options.id
			getData()
		}
	})
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.contens {
		padding: 30rpx;
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

		.title {

			font-size: 28rpx;
			color: #333333;
			line-height: 36rpx;
			// font-weight: 600;
			// margin-left: 16rpx;
			margin-top: 16rpx;
		}

		.list_item {
			// margin: 16rpx 0;
			margin-top: 16rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
		}

		.filter {
			color: #999;
		}
	}

	.card {
		padding: 30rpx;
		background: #FFFFFF;
		margin: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

		.house_name {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #000000;
			line-height: 36rpx;
			font-weight: 600;
			// margin-left: 16rpx;
			// margin-top: 16rpx;
		}

		.title {
			font-size: 32rpx;
			color: #999;
			line-height: 36rpx;
			// font-weight: 600;
			// margin-left: 16rpx;
			margin-top: 16rpx;
		}

		.all_price {
			font-size: 32rpx;
			color: #EE7930;
			line-height: 36rpx;
			font-weight: 600;
			// margin-left: 16rpx;
			margin-top: 16rpx;
		}

		.grid_box {
			margin-top: 16rpx;
			// display: grid;
			// grid-template-columns: 1fr 1fr 1fr ;
			// gap: 16rpx;
			display: flex;
			justify-content: space-between;

			.grid_item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.grid_title {
					color: #999;
					font-size: 28rpx;
				}

				.grid_value {
					font-size: 28rpx;
				}
			}
		}

	}

	.list {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 30rpx;
		background: #FFFFFF;
		position: relative;
		margin: 0 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

		.title {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			width: 140rpx;
			text-align: left;
		}

		input {
			font-size: 28rpx;
		}

		.more_icon {
			position: absolute;
			right: 30rpx;
			top: 44rpx;
			width: 18rpx;
			height: 30rpx
		}
	}

	.line {
		background: #eeeeee;
		height: 1rpx;
		// width: 100%;
		// margin: 0 30rpx;
		margin: 24rpx 0;
	}

	.magrin_top {
		margin-top: 16rpx;
	}

	.sub-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		border-top: 1px dashed #eee;
	}

	.sub-item:first-child {
		border-top: none;
	}

	.sub-item-label {
		font-size: 26rpx;
		color: #666;
	}

	.sub-item-value {
		font-size: 26rpx;
		color: #333;
	}
</style>